<template>
  <!-- 容器 -->
  <div class="charts" ref="charts"></div>
</template>

<script>
//引入echarts
import echarts from "echarts";
import {mapState} from 'vuex'
export default {
  name: "LineChart",
  data(){
    return{
      lineCharts:null,
    }
  },
  mounted() {
    //初始化echarts实例
   this.lineCharts =  echarts.init(this.$refs.charts);
    //配置数据
    this.lineCharts.setOption({
       xAxis:{
        //隐藏x轴
        show:false,
        type:'category'
       },
       yAxis:{
        //隐藏y轴
        show:false
       },
       //系列
       series:[
        {
            type:'line',
            //曲线圆滑
            smooth: true,
            data:[10,7,33,12,88,9],
            //拐点的样式设置
            itemStyle:{
                opacity:0
            },
            //线条的样式
            lineStyle:{
                color:'#8972c8'
            },
            //填充颜色设置
            areaStyle:{
                color:{
                    type:'linear',
                    x:0,
                    y:0,
                    x2:0,
                    y2:1,
                    colorStops:[
                        {
                            offset:0,
                            color:'#8972c8',
                        },
                        {
                            offset:1,
                            color:'white',
                        },
                    ],
                    global:false
                }
            }
        }
       ],
       tooltip:{
         textStyle:{
          color:'red'
         }
       },
       //布局调试
       grid:{
        left:0,
        top:0,
        right:0,
        bottom:0
       }
    })
  },
  computed:{
    ...mapState({
      visitTrend:state=>state.home.list.visitTrend
    })
  },
  watch:{
    visitTrend(){
      this.lineCharts.setOption({
        series:[{
          data:this.visitTrend
        }]
      })
    }
  }
};
</script>

<style>
.charts {
  width: 100%;
  height: 100%;
}
</style>